<template>
  <section class="recommend">
    <header>
      <div class="banner">全部产品分类</div>
      <div class="main-recommend">
        <template v-for="item in mainRecommend">
          <el-link
            :key="item.id"
            :underline="false"
            type="default"
            @click="toGoodList(item.id, item.name, item.topid)"
            >{{ item.name | substr }}</el-link
          >
        </template>
      </div>
    </header>
    <main>
      <div class="categorys">
        <el-collapse v-model="activeNames" @change="handleChange" accordion>
          <el-collapse-item title="搬运类" name="1">
            <template v-if="goodsType[0].length > 0">
              <template v-for="(item, index) in goodsType[0]">
                <el-link
                  :underline="false"
                  :key="index"
                  @click="
                    toGoodList(item.firstCategory, item.firstCategoryName, 1)
                  "
                  >{{
                    item.firstCategoryName | substFirstCategoryName
                  }}</el-link
                >
              </template>
            </template>
          </el-collapse-item>
          <el-collapse-item title="输送类" name="2">
            <template v-if="goodsType[1].length > 0">
              <template v-for="(item, index) in goodsType[1]">
                <el-link
                  :underline="false"
                  :key="index"
                  @click="
                    toGoodList(item.firstCategory, item.firstCategoryName, 2)
                  "
                  >{{
                    item.firstCategoryName | substFirstCategoryName
                  }}</el-link
                >
              </template>
            </template>
          </el-collapse-item>
          <el-collapse-item title="包装类" name="3">
            <template v-if="goodsType[2].length > 0">
              <template v-for="(item, index) in goodsType[2]">
                <el-link
                  :underline="false"
                  :key="index"
                  @click="
                    toGoodList(item.firstCategory, item.firstCategoryName, 3)
                  "
                  >{{
                    item.firstCategoryName | substFirstCategoryName
                  }}</el-link
                >
              </template>
            </template>
          </el-collapse-item>
          <el-collapse-item title="其他类" name="4">
            <template v-if="goodsType[3].length > 0">
              <template v-for="(item, index) in goodsType[3]">
                <el-link
                  :underline="false"
                  :key="index"
                  @click="
                    toGoodList(item.firstCategory, item.firstCategoryName, 4)
                  "
                  >{{
                    item.firstCategoryName | substFirstCategoryName
                  }}</el-link
                >
              </template>
            </template>
          </el-collapse-item>
          <el-collapse-item title="配件类" name="5">
            <template v-if="goodsType[4].length > 0">
              <template v-for="(item, index) in goodsType[4]">
                <el-link
                  :underline="false"
                  :key="index"
                  @click="
                    toGoodList(item.firstCategory, item.firstCategoryName, 5)
                  "
                  >{{
                    item.firstCategoryName | substFirstCategoryName
                  }}</el-link
                >
              </template>
            </template>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="content">
        <el-breadcrumb separator=">>">
          <el-breadcrumb-item :to="{ path: '/' }">商城首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品列表</el-breadcrumb-item>
          <el-breadcrumb-item v-if="hasAccessories"
            ><span class="breadcrumb-a" @click="toGoodListByType(2)">{{
              accessoriesText
            }}</span></el-breadcrumb-item
          >
          <el-breadcrumb-item v-else
            ><span
              class="breadcrumb-a"
              @click="toGoodListByDeciveType(goodsListParams.deviceType)"
              >{{ deviceTypeText }}</span
            ></el-breadcrumb-item
          >
          <el-breadcrumb-item v-if="hasFirstCategory"
            ><span
              class="breadcrumb-a"
              @click="
                toGoodList(
                  goodsListParams.firstCategory,
                  goodsListParams.firstCategoryName,
                  goodsListParams.deviceType
                )
              "
              >{{ goodsListParams.firstCategoryName }}</span
            ></el-breadcrumb-item
          >
        </el-breadcrumb>
        <div class="title">
          <div class="key">
            {{ key }}
            <div class="border-bottom"></div>
          </div>
          <div class="result">
            <span>搜索到</span>
            <span class="color"> {{ count }} </span>
            <span>件相关产品</span>
          </div>
        </div>
        <div class="list">
          <template v-for="item in goodsList">
            <div class="item" :key="item.id">
              <el-link :underline="false" @click="toDetail(item.id, item.type)">
                <el-image
                  style="width: 200px; height: 150px"
                  :src="item.mainPhoto"
                  fit="fit"
                ></el-image>
              </el-link>
              <div class="name">{{ item.name }}</div>
              <div class="params" v-if="item.specification[0]">
                {{ item.specification[0].key }}:
                {{ item.specification[0].value }}
              </div>
              <div class="params" v-if="item.specification[1]">
                {{ item.specification[1].key }}:
                {{ item.specification[2].value }}
              </div>
              <el-button
                type="primary"
                class="big-btn"
                @click="toInquiry(item.id)"
                >立即询价</el-button
              >
            </div>
          </template>
        </div>
      </div>
    </main>
  </section>
</template>

<script>
import { getModelRecommend, getAllGoodsType } from "@/api/api.js";
export default {
  name: "GoodsList",
  data() {
    return {
      activeNames: "",
      goodsType: [[], [], [], [], []], //商品分类
      mainRecommend: [], //主推
      accessoriesText: "配件类",
      deviceType: {
        1: "搬运类",
        2: "输送类",
        3: "包装类",
        4: "其他类",
      },
    };
  },
  created() {
    this.getAllGoodsType();
    this.getModelRecommend();
  },
  computed: {
    key() {
      return (
        this.$store.state.user.goodsListParams.firstCategoryName ||
        this.deviceType[this.$store.state.user.goodsListParams.deviceType] ||
        this.accessoriesText
      );
    },
    goodsListParams() {
      return this.$store.state.user.goodsListParams;
    },
    hasAccessories() {
      return this.$store.state.user.goodsListParams.type === 2 ? true : false;
    },
    hasFirstCategory() {
      return this.$store.state.user.goodsListParams.firstCategory
        ? true
        : false;
    },
    deviceTypeText() {
      return this.deviceType[this.$store.state.user.goodsListParams.deviceType];
    },
    count() {
      return this.$store.state.user.goodsList.total;
    },
    goodsList() {
      return this.$store.state.user.goodsList.list;
    },
  },
  methods: {
    handleChange(val) {
      console.log(val);
      if (val === "5") {
        this.toGoodListByType(2);
      } else {
        this.toGoodListByDeciveType(val);
      }
    },
    getAllGoodsType() {
      getAllGoodsType({}).then((res) => {
        console.info("全部分类", res?.data);
        this.goodsType = res.data || [];
      });
    },
    getModelRecommend() {
      getModelRecommend({}).then((res) => {
        console.info("主推", res?.data?.mainRecommend);
        this.mainRecommend = res?.data?.mainRecommend;
      });
    },
    toGoodList(firstCategory, firstCategoryName, topid) {
      this.$store.dispatch("user/getGoodsList", {
        firstCategory,
        firstCategoryName,
        deviceType: topid,
      });
      if (this.$router.currentRoute.name !== "GoodsList") {
        this.$router.push({ path: "/goodsList" });
      }
    },
    toGoodListByDeciveType(deviceType) {
      this.$store.dispatch("user/getGoodsList", { deviceType });
      if (this.$router.currentRoute.name !== "GoodsList") {
        this.$router.push({ path: "/goodsList" });
      }
    },
    toGoodListByType(type) {
      this.$store.dispatch("user/getGoodsList", { type });
      if (this.$router.currentRoute.name !== "GoodsList") {
        this.$router.push({ path: "/goodsList" });
      }
    },
    toDetail(id, type) {
      this.$router.push({ path: "/goodsDetail", query: { id, type } });
    },
    toInquiry(id) {
      this.$store.dispatch("user/updateGoodId", { id: id });
    },
  },
  filters: {
    substr: function(value) {
      if (value.length > 6) {
        value = value.substring(0, 5) + "…";
      }
      return value;
    },
    substFirstCategoryName: function(value) {
      if (value.length > 12) {
        value = value.substring(0, 11) + "…";
      }
      return value;
    },
  },
};
</script>

<style lang="scss" scoped>
$left-width: 230px;

.recommend {
  width: 1200px;
  margin: 0 auto;

  header {
    height: 37px;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .banner {
      width: $left-width;
      background: #3378ff;
      color: #ffffff;
      font-weight: bold;
      font-size: 16px;
      line-height: 37px;
    }

    .main-recommend {
      width: calc(100% - #{$left-width});
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 2px solid #3378ff;

      ::v-deep .el-link {
        font-family: Microsoft YaHei;
        font-style: normal;
        font-weight: bold;
        font-size: 16px;
        line-height: 21px;
        color: #303133;
        width: calc(100% / 7);
      }
    }
  }
  main {
    display: flex;
    justify-content: start;

    .categorys {
      width: $left-width;

      ::v-deep .el-collapse {
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;

        .el-collapse-item__header {
          padding-left: 15px;
          font-size: 14px;
          font-weight: bold;
          background-color: #f8f8f8;
        }
        .el-collapse-item__content {
          padding-bottom: 0;
          .el-link {
            width: 100%;
            border-top: 1px solid #ebeef5;
            justify-content: flex-start;
            padding: 10px 15px;
          }
        }
      }

      .category {
        width: 100%;
        height: calc(100% / 5);
        color: #ffffff;
        background: #777777;
        font-weight: bold;
        font-size: 14px;
        line-height: 18px;

        .category-item {
          padding: 0 14px;
          height: 100%;
          display: flex;
          align-items: center;
          cursor: pointer;

          .sub-category {
            color: #bbbbbb;
            margin-left: 5px;
          }
          .sub-category:first-child {
            margin-left: 10px;
          }
        }
      }
      .category:not(:first-child) {
        border-top: 0.5px solid #bbbbbb;
      }
    }

    .content {
      width: calc(100% - #{$left-width});
      padding-left: 30px;
      padding-top: 20px;

      .title {
        height: 60px;
        display: flex;
        justify-content: flex-start;
        border-bottom: 3px solid #e7e7e7;
        align-items: center;

        .key {
          font-family: Microsoft YaHei;
          font-style: normal;
          font-weight: bold;
          font-size: 20px;
          line-height: 26px;
          color: #3378ff;

          .border-bottom {
            border-bottom: 3px solid #3378ff;
            position: relative;
            top: 17px;
          }
        }
        .result {
          font-weight: bold;
          font-size: 14px;
          line-height: 18px;
          display: flex;
          align-items: center;
          color: #606266;
          margin-left: 10px;

          .color {
            color: #3378ff;
            margin: 0 5px;
          }
        }
      }
      .list {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .item {
          width: 220px;
          padding: 10px;
          margin: 20px 7.5px 0;
          outline: 1px solid #e7e7e7;

          .name {
            font-weight: bold;
            font-size: 16px;
            line-height: 21px;
            color: #303133;
            word-break: break-all;
            margin-top: 10px;
            margin-bottom: 10px;
          }
          .params {
            font-size: 14px;
            line-height: 18px;
            color: #606266;
            text-align: left;
          }
          .big-btn {
            margin-top: 10px;
            font-size: 16px;
            padding: 13px;
            width: 100%;
            border-radius: 0;
          }
        }
      }
    }
  }
}
</style>
